<template>
  <div>
    <div>
      <van-nav-bar>
        <template #left>
          <div class="left-nav">
            <img src="../assets/images/home_active.png" alt="" />
            Luckin Coffee
          </div>
        </template>
        <template #right>
          <div class="right-nav" @click="stroll">先逛一逛</div>
        </template>
      </van-nav-bar>
    </div>
    <div class="banner">
      <h3>找回密码!</h3>
      <p>Find password</p>
    </div>
    <div>
      <van-form>
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          autocomplete="off"
        />
        <van-field
          v-model="mycode"
          name="mycode"
          label="验证码"
          placeholder="请输入六位验证码"
          autocomplete="off"
        >
          <template #button>
            <van-button size="small" type="primary" @click="getMycode"
              >发送验证码</van-button
            >
          </template></van-field
        >
        <div class="forgot" >
          <span @click="login">已有账号，立即登录</span>
          </div>
        <div class="allbutton">
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              @click="checkMycode"
              >下一步</van-button
            >
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindPwd",
  data() {
    return {
      email: "",
      mycode: "",
    };
  },
  methods: {
    // 先逛一逛
    stroll() {
      this.$router.push({ name: "Home" });
    },
    // 登录
    login() {
      this.$router.push({ name: "Login" });
    },
    // 获取邮箱验证码
    getMycode() {
      // 验证邮箱地址格式是否正确
      let emailCheck = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (!emailCheck.test(this.email)) {
        this.$toast("请输入正确的邮箱");
        return;
      }

      this.axios({
        method: "POST",
        url: "/emailValidCode",
        data: {
          email: this.email,
        },
      })
        .then((res) => {
          this.$toast(res.data.msg);
        })
        .catch((err) => {
          
        });
    },
    // 验证邮箱验证码
    checkMycode() {
      // 验证验证码格式是否正确
      let codeCheck = /^\d{6}$/;
      if (!codeCheck.test(this.mycode)) {
        this.$toast("请输入正确的6位验证码");
        return;
      }
      this.axios({
        method: "POST",
        url: "/checkValidCode",
        data: {
          validCode: this.mycode,
        },
      })
        .then((res) => {
          this.$toast(res.data.msg);
          if (res.data.code === "K001") {
            setTimeout(() => {
              this.$router.push({ name: "FindPwdNext" });
            }, 2000);
            return;
          }
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
.left-nav {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: rgb(12, 52, 186);
  img {
    width: 25px;
    height: 25px;
    margin-right: 15px;
    vertical-align: middle;
  }
}
.banner {
  padding: 40px 25px;
  h3 {
    font-size: 22px;
    color: gray;
  }
  p {
    font-size: 16px;
    color: gray;
  }
}
.forgot {
  padding: 25px 15px 15px 250px;
}
/deep/ .van-button {
  background-color: rgb(12, 52, 186);
  border: 1px solid rgb(12, 52, 186);
}
.allbutton {
  /deep/ .van-button {
    margin: 20px 0;
    background-color: rgb(12, 52, 186);
    border: 1px solid rgb(12, 52, 186);
  }
}
.zhuce-btn {
  border: 1px solid rgb(12, 52, 186);
  width: 345px;
  margin: 20px 15px;
  background-color: white;
  color: rgb(12, 52, 186);
}
.zhuce {
  padding-top: 45px;
  .van-button {
    background-color: rgb(12, 52, 186);
    border: none;
  }
}
</style>